<template>
  <div class="package-box">
    <div class="package-header">
      资费套餐
    </div>
    <div class="item-box">
      <div class="item">
        <div class="item-section">
          <div class="item-section-logo">
            <img src="../assets/images/item1.png"/>
          </div>
          <div class="item-section-description">
            <div class="item-section-description-top">
              <img src="../assets/images/item2_logo.png"/>
              <div>限时套餐</div>
            </div>
            <div class="item-section-description-bottom">
              <span class="danger-color">限时购</span>
              <div>包月 (不限流量套餐)</div>
            </div>
          </div>
          <div class="item-district">
            <div>使用范围</div>
            <div>（桔子公寓）</div>
          </div>
          <div class="item-number">
            <div class="number-box">
              <span>-</span>
              <input type="text" v-model="number"/>
              <span>+</span>
            </div>
          </div>
          <div class="item-price danger-color">
            ￥60
          </div>
        </div>
        <div class="item-section2">
              该套餐新春促销中，每个帐户限购数量为10
        </div>
        <div class="no-item-check">

        </div>
      </div>
      <div class="item">
        <div class="item-section">
          <div class="item-section-logo">
            <img src="../assets/images/item1.png"/>
          </div>
          <div class="item-section-description">
            <div class="item-section-description-top">
              <img src="../assets/images/item2_logo.png"/>
              <div>限时套餐</div>
            </div>
            <div class="item-section-description-bottom">
              <span class="danger-color">限时购</span>
              <div>包月 (不限流量套餐)</div>
            </div>
          </div>
          <div class="item-district">
            <div>使用范围</div>
            <div>（桔子公寓）</div>
          </div>
          <div class="item-number">
            <div class="number-box">
              <span>-</span>
              <input type="text" v-model="number"/>
              <span>+</span>
            </div>
          </div>
          <div class="item-price danger-color">
            ￥60
          </div>
        </div>
        <div class="item-section2">
              该套餐新春促销中，每个帐户限购数量为10
        </div>
        <div class="item-checked"></div>
      </div>
    </div>
    <div class="finish-box">
      <span>总计费用:</span>
      <span class="danger-color">￥60</span>
      <button>结算</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "record",
    data: function () {
      return {
        number: 1,
        package: [
          {
            isChecked: false,
            imgUrl: '../../static/images/package/item1.png',
            itemLogo: ''
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .no-item-check{
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    border: 1px solid #bbb;
    border-radius: 50%;
    /*background-image: url("../assets/images/no_item_check.png");*/
    /*background-size: 25px 25px;*/
    cursor: pointer;
  }
  .item-checked {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    background-image: url("../assets/images/item_check.png");
    background-size: 25px 25px;
  }
  .finish-box {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: 17px;
    border-radius: 5px;
    background-color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 25px;
  }
  .finish-box button {
    float: right;
    width: 116px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color:#fff;
    background-color: #fc2d48;
    border: none;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
  }
  .item-section2 {
    width: 280px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    background-color: #f4f8fb;
    margin-left: 112px;
    margin-top: 8px;
    border-radius: 5px;
  }
  .package-box {
    color: #444;
    font-size: 12px;
  }

  .item-district {
    margin-left: 65px;
  }

  .item-district > div {
    height: 27px;
    text-align: center;
    line-height: 27px;
  }

  .package-header {
    width: 100%;
    height: 57px;
    line-height: 57px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #f5f3f3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 16px;
    text-align: center;
  }

  .item-box {
   height: 500px;
    overflow-x: hidden;
  }

  .item {
    width: 100%;
    box-sizing: border-box;
    padding: 19px 25px 10px;
    background-color: #fff;
    border-bottom: 1px solid #f5f3f3;
    position: relative;
  }

  .item-section {
    overflow: hidden;
  }
  .item-section > div {
    float: left;
  }

  .item-section > .item-price {
    float: right;
    line-height: 54px;
    font-size: 16px;
  }
  .item-section-logo {
    margin-left: 40px;
  }
  .item-section-logo img {
    width: 52px;
    height: 52px;
  }

  .item-section-description {
    color: #444444;
    margin-left: 20px;
  }

  .item-section-description > div {
    overflow: hidden;
  }

  .item-section-description img {
    width: 22px;
    height: 22px;
    float: left;
  }

  .item-section-description-top > div {
    float: left;
    margin-left: 6px;
    padding-bottom: 2px;
    font-size: 16px;
    border-bottom: 1px solid #444444;
  }

  .package-box {
    float: left;
    margin-left: 12px;
    width: 757px;
    border-radius: 5px;
  }

  .item-section-description-bottom {
    margin-top: 10px;
    overflow: hidden;
    font-size: 12px;
    color: #444444;
  }

  .item-section-description-bottom span {
    display: block;
    float: left;
    box-sizing: border-box;
    height: 20px;
    padding: 0 6px;
    border: 1px solid red;
    margin-right: 6px;
  }

  .item-section-description-bottom > div {
    float: left;
    line-height: 18px;
  }

  .item-number {
    height: 54px;

    margin-left: 60px;
  }

  .item-number > div {
    margin-top: 15px;
    width: 100px;
    height: 24px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
    overflow: hidden;
    font-size: 14px;
  }

  .item-number > div span {
    display: block;
    float: left;
    width: 29px;
    text-align: center;
    height: 22px;
    line-height: 22px;
    cursor: pointer;
  }

  .item-number > div input {
    float: left;
    width: 40px;
    height: 24px;
    text-align: center;
    border: none;
    outline: none;
  }
</style>
